<template>
    <div class="ac-all" id="activit_box">
        <!-- <div class="title c-title-3 c-bold">{{$t('message.Home.d')}}</div> -->
        <NavTitle :is-more="false" :title="$t('message.Home.d')">
            <Lines></Lines>
        </NavTitle>
        <div class="tb c-title-5">
            <YHader :select-action="selectAction" :select-number="selectNumber"></YHader>
            <AnimTable ref="anim" :list="desserts" :max="20" class="mv-tb" :interval="1200">
                <template v-slot:row="{ row: item, rowIndex, ago }">
                    <div class="th-body c-title-4">
                        <div class="th-item f-item1" @click="onShow(item)" :title="formatTimestamp(item.timestamp)"
                            :style="{ color: getColor(item) }">{{ item.type }}</div>
                        <!-- {{ item.action }} -->
                        <!-- 转账 -->
                        <template v-if="item.type == 'transfer'">
                            <div class="th-item f-item2 d-flex align-center hoverIcon">
                                <div class="icon-box ico-1">
                                    <span class="iconfont"
                                        :class="item.fromAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                                </div>
                                <Copy :text="item.fromTag || item.address" :is-search="false" :is-copy="true"
                                    @change="(e) => onOpenURL(item, 'from', e)">
                                </Copy>
                            </div>

                            <div class="th-item f-item3">
                                <VIcon style="color: #737b83">mdi mdi-arrow-right-thin</VIcon>
                            </div>
                            <div class="th-item f-item4 hoverIcon">
                                <!-- <div class="d-flex align-center"> -->
                                    <div class="icon-box ico-2">
                                        <span class="iconfont"
                                            :class="item.toAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                                    </div>
                                    <Copy :text="item.toTag || item.toAddress" :is-search="false" :is-copy="true"
                                        @change="(e) => onOpenURL(item, 'to', e)">
                                    </Copy>
                                <!-- </div> -->
                            </div>

                            <div class="th-item f-item5 d-flex align-center">
                                <div class="flex-txt text-truncate wgt" :title="item.outAmount" style="width: 100%">
                                    <div class="i-left">
                                        <jNumber :num="item.outAmount" price :is-color="true"></jNumber>
                                    </div>
                                    <span class="syb coin-link long-txt" @click="onDetail(item, 'out')">{{ item.outSymbol
                                    }}</span>
                                </div>
                            </div>

                            <div class="th-item f-item6">
                                <JNumber :num="item.outusdt" prefix="$" price></JNumber>
                            </div>
                        </template>

                        <!-- 成交 -->
                        <template v-else>
                            <div class="th-item f-item2 d-flex align-center hoverIcon">
                                <div class="icon-box ico-1">
                                    <span class="iconfont"
                                        :class="item.fromAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                                </div>
                                <Copy :text="item.fromTag || item.address" :is-search="false" :is-copy="true"
                                    @change="(e) => onOpenURL(item, 'from', e)">
                                </Copy>
                            </div>

                            <div class="th-item f-item3">
                                <VIcon style="color: #737b83">mdi mdi-swap-horizontal</VIcon>
                            </div>

                            <div class="th-item f-item4 d-flex align-center hoverIcon">
                                <div class="icon-box ico-2">
                                    <span class="iconfont"
                                        :class="item.toAddressType == 'eoa' ? 'icon-touxiang' : 'icon-icon_xinfang'"></span>
                                </div>
                                <Copy :text="item.toTag || item.toAddress" :is-search="false" :is-copy="true"
                                    @change="(e) => onOpenURL(item, 'to', e)">
                                </Copy>
                            </div>

                            <div class="th-item f-item5 f-item5_ d-flex more-line">
                                <div class="flex-txt text-truncate lose-color wgt" :title="item.outAmount">
                                    <div class="i-left">
                                        <JNumber :num="item.outAmount" price></JNumber>
                                    </div>
                                    <span class="syb coin-link long-txt" @click="onDetail(item, 'out')">{{ item.outSymbol
                                    }}</span>
                                </div>
                                <div class="flex-txt text-truncate win-color wgt" :title="item.inAmount">
                                    <div class="i-left">
                                        <JNumber :num="item.inAmount" notformat :is-color="true" price></JNumber>
                                    </div>
                                    <span class="syb coin-link long-txt" @click="onDetail(item, 'in')">{{ item.inSymbol
                                    }}</span>
                                </div>
                            </div>

                            <div class="th-item f-item6">
                                <JNumber :num="item.outusdt" prefix="$" price></JNumber>
                            </div>
                        </template>
                        <div class="th-item f-item7">
                            <!-- <p>{{ ago }}</p> :title="formatTimestamp(item.timestamp)"-->
                            <TimeTips :text="formatTimestamp(item.timestamp)">
                                <span>{{ ago }}</span>
                            </TimeTips>
                            <div class="d-flex share_">
                                <span class="c-title-5 look" @click="onJump(item)">
                                    <span class="iconfont icon-fenxiang1 ss-btn"></span>
                                </span>
                                <!-- <JShare class="c-title-5 ml-3" style="display: inline">
                                    <span class="iconfont icon-13 ss-btn"></span>
                                </JShare> -->
                            </div>
                        </div>
                    </div>
                </template>
            </AnimTable>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { formatBigNumber, formatTimestamp, formatTimeAgo } from "@/comm/format";
import { ref, onMounted, watch } from "vue";
import { useActivity } from "@/stores/activity";
import { difference } from "@/comm/arrayTooler";
import { useRouter } from "vue-router";
import Copy from "@/components/copy/index.vue";
import TimeTips from "@/components/timeTips/index.vue";
import NavTitle from "@/views/home/component/NavTitle/index.vue";
import Lines from "@/components/lines/index.vue";

import img1 from "@/assets/trans.png";
import img2 from "@/assets/dine.png";
import YHader from "../YHader.vue";
import JNumber from "@/components/j-number/index.vue";
// import AnimTable from "@/components/anim-table/index.vue";
import AnimTable from "@/components/anim-table-list/index.vue";
import JShare from "@/components/j-share/index.vue";
import i18n from "@/locals";
const activity = useActivity();
const router = useRouter();
const desserts = ref<any[]>([]);
// const buttons = ref(["所有", "交易", "转账"]);
const buttons = ref([
    {
        // label: "所有",
        label: i18n.global.t("message.Activity.btns.a"),
        value: null
    },
    {
        // label: "交易",
        label: i18n.global.t("message.Activity.btns.b"),
        value: "swap"
    },
    {
        // label: "转账",
        label: i18n.global.t("message.Activity.btns.c"),
        value: "transfer"
    }
]);
const curBtn = ref<any>(null);

const anim = ref();
const onStop = () => {
    anim.value.stop();
};

const selectAction = function (item: any, items: any) {
    // console.log('yzt回调', item, items);
    activity.changeFilterType(item.value);
    resetTable();
};
const selectNumber = function (item: any, items: any) {
    // console.log('yzt回调', item, items);
    if (item.value.length == 0) {
        activity.changeRange(null);
    } else {
        activity.changeRange([item.value[0], item.value[1]]);
    }
    resetTable();
};

const getColor = (item: any) => {
    let red = "#f6475d";
    let green = "#0dcb81";
    if (item.type == "transfer") {
        //充值
        if (item.action == "deposit") {
            if (item.outStable) {
                return green;
            }
            return red;
        }
        //提现
        if (item.action == "withdraw") {
            if (item.outStable) {
                return red;
            }
            return green;
        }
        return red;
    }
    return red;
};
const getWord = (item: any) => {
    if (item.type == "transfer") {
        if (item.action == "deposit") {
            // return "充值"
            return i18n.global.t("message.Activity.c");
        } else if (item.action == "withdraw") {
            // return "提现"
            return i18n.global.t("message.Activity.f");
        } else {
            return "transfer";
        }
        // return i18n.global.t('message.Activity.d');
    }
    // return "交易";
    return i18n.global.t("message.Activity.e");
};

const isEmpty = ref(true);

const updateEmpty = () => {
    // console.log("anim.value.getList()", anim.value?.getList());
    if (anim.value) {
        let list = anim.value.getList();
        if (list && list.length > 0) {
            return false;
        }
    }
    return true;
};

const onDetail = (coin: any, type: string) => {
    let ct = type == "in" ? coin.inTokenAddress : coin.outTokenAddress;
    // router.push({ name: 'token', params: { id: ct } });
    window.open("/token/" + ct);
};

const searchRanges = ref([createRange(null as any, true), createRange([10, 1000]), createRange([1000, 100000]), createRange([100000, 100000000]), createRange([100000000, 1000000000000])]);

const curRange = ref(searchRanges.value[0]);

function createRange(ary: any[], choose = false) {
    if (!ary) {
        return { choose };
    }
    return {
        from: ary[0],
        to: ary[1],
        choose
    };
}

onMounted(async () => {
    curBtn.value = buttons.value[0];
    // await activity.loadHistory();
    // updateRange();
    resetTable();

    // Bus.on(CONN_ACTIVITY, (val: any) => {
    //     activity.pushActivitys(val);
    // });
});

watch(
    () => activity.pushItems,
    (newVal, oldVal) => {
        // const diff = difference(newVal, oldVal);
        // if (anim.value) {
        //     anim.value.addList(diff);
        // }
        anim.value.addList(newVal);
    }
);

const resetTable = () => {
    anim.value.resetTable(activity.visibleRange);
    setTimeout(() => {
        isEmpty.value = updateEmpty();
    }, 120);
};

const onJump = (item: any) => {
    window.open("https://etherscan.io/tx/" + item.transactionHash);
};

const onShow = (item: any) => {
    console.log(item);
    onPerson(item.fromTag || item.address, false, null);
};

const onPerson = (str: string, val: boolean, item: any) => {
    console.error(str, item);
    if (!val) return;
    console.log(str);
    window.open("/address/" + str);
};
const findKey = (targetValue: any, item: any) => {
    let key = ''
    for (let i in item) {
        if (targetValue == item[i]) {
            key = i
        }
    }
    return key
}
const onOpenURL = (item: any, type?: string, str?: any) => {
    const personURL = '/address/'
    const browserURL = '/entity/'
    const key = findKey(str, item)
    // console.error('跳转', key, item)
    // return
    if (key == 'address') {
        if (item.fromAddressType == 'eoa' && item.address) {
            window.open(personURL + item.address)
        }
    }
    if (key == 'fromTag') {
        if (item.fromEntityId && (item.fromAddressType == 'cex' || item.fromAddressType == 'fund')) {
            window.open(browserURL + item.fromEntityId)
        }
    }
    if (key == 'fromEntityId') {
        if (item.fromAddressType == 'cex' || item.fromAddressType == 'fund') {
            window.open(browserURL + item.fromEntityId)
        }
    }
    if(key == 'toEntityId'){
        if (item.toAddressType == 'cex' || item.toAddressType == 'fund') {
            window.open(browserURL + item.toEntityId)
        }
    }
    if (key == 'toTag') {
        if (item.toEntityId && (item.toAddressType == 'cex' || item.toAddressType == 'fund')) {
            window.open(browserURL + item.toEntityId)
        }
    }
    if (key == 'toAddress') {
        if (item.toAddressType == 'eoa') {
            window.open(personURL + item.toAddress)
        }
    }

}
// // 创建一个 Date 对象并设置时间戳（以毫秒为单位）
// const timestamp = 1632825600000; // 例如，这是一个时间戳

// // 选择目标时区
// const targetTimeZone = 'America/New_York'; // 例如，将时区设置为纽约

// // 创建一个日期对象，同时指定时区
// const dateInTargetTimeZone = new Date(timestamp);
// const options = { timeZone: targetTimeZone };

// // 使用 Intl.DateTimeFormat 格式化日期对象
// const formattedDate = new Intl.DateTimeFormat('en-US', options).format(dateInTargetTimeZone);

// console.log(formattedDate); // 输出格式化后的日期字符串

// const desserts = ref([
//     {
//         address: "0x35d2d88a8a3c6fe153ab3d4eb7ab0b31508239d5",
//         children: {
//             inAmount: 251812040178,
//             inSymbol: "PEPEMAN",
//             outAmount: 0,
//             outSymbol: "WETH",
//         },
//         fromContract: "0x35d2d88a8a3c6fe153ab3d4eb7ab0b31508239d5",
//         timestamp: 1690935467000,
//         toAddress: "0x7a250d5630b4cf539739df2c5dacb4c659f2488d",
//         toContract: "0x7a250d5630b4cf539739df2c5dacb4c659f2488d",
//         transactionHash: "0x16eda129209b7fa1fe580ab11b0495ef3ca3"
//     }
// ])
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
